import React, { useRef, useEffect } from 'react'
import { useGLTF } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

// 正确预加载
useGLTF.preload('/assets/models/DNA.glb')

interface DNAModelProps {
  position?: [number, number, number];
  scale?: [number, number, number];
}

export function DNAModel({ position = [0, 0, 0], scale = [1, 1, 1] }: DNAModelProps) {
  const { scene } = useGLTF('/assets/models/DNA.glb')
  const group = useRef<THREE.Group>(null)

  useEffect(() => {
    if (scene) {
      scene.traverse((child) => {
        if (child instanceof THREE.Mesh) {
          child.castShadow = true;
          child.receiveShadow = true;
          // 设置材质为白色
          if (child.material instanceof THREE.Material) {
            child.material = new THREE.MeshStandardMaterial({ 
              color: '#FFFFFF',
              transparent: true,
              opacity: 0.8
            });
          }
        }
      });
    }
  }, [scene])

  useFrame((state) => {
    if (group.current) {
      group.current.rotation.y += 0.005;
    }
  })

  return (
    <group ref={group} position={position} scale={scale}>
      <primitive object={scene} dispose={null} />
    </group>
  )
} 